<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/huclass.css">
    <link rel="stylesheet"  href="css/swiper.min.css">
    <link rel="stylesheet"  href="css/fudong.css">
</head>
<body>

<div  class="head">

</div>

<div  id="hucontain">

    <div class="fudongd"></div>

    <div class="hulunbo">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <img  v-for="item  in lunbos "  class="swiper-slide"  :src="item.src"  />
            </div>
            <!--分页器-->
            <div class="swiper-pagination"></div>
        </div>
    </div>


    <div  class="huzuixinkaiban">
        <div>
             <div>
                  <div>课程导航</div>
                  <div>
                      <div @click="hoverd" :class="indexs==0?'daohanghover':''"  :index="0">小学辅导</div>
                      <div @click="hoverd" :class="indexs==1?'daohanghover':''" :index="1">中学辅导</div>
                      <div @click="hoverd" :class="indexs==2?'daohanghover':''"  :index="2">高中辅导</div>
                  </div>
             </div>
             <div><img  :src="kcdhimg"   /></div>
             <div>
                 <div>
                     <div  class="webmys" v-if="state==false">
                         <div><img  :src="webmorentou" /></div>
                         <div>
                             <div>HI 欢迎来到博知堂</div>
                         </div>
                     </div>
                     <!--&lt;!&ndash;登录后的样式&ndash;&gt;-->
                     <div class="webmyssd" v-else="!state">
                         <div>
                             <div><img  :src="webmorentou" /></div>
                             <select>
                                 <option v-for="item in  haizis"  :value="item.name">{{item}}</option>
                             </select>
                            </div>
                     </div>

                     <div class="webmyss" >
                         <div  @click="tomy(index)"   :indexs="index"  v-for="(item,index)  in  myxinxi">
                             <img  :src="item.src"  />
                             <p>{{item.miao}}</p>
                         </div>
                     </div>
                 </div>
                 <div><img :src="kcdhimg1"  /></div>
             </div>

         <div v-if="indexs==0" class="xingqings">
                <div  class="xingqings1">
                      <div v-for="item in sd">
                               <div>{{item}}</div>
                               <div><div v-for="item in kechengs">{{item}}</div></div>
                      </div>
                 </div>
         </div>
            <div v-else-if="indexs==1"class="xingqings xinqin1">
             <div  class="xingqings1 ">
                 <div v-for="item in sd1">
                         <div>{{item}}</div>
                         <div><div v-for="item in kechengs">{{item}}</div></div>
                 </div>

             </div>
            </div>

            <div v-else-if="indexs==2"class="xingqings  xinqin2">
            <div  class="xingqings1 ">
                 <div v-for="item in sd2">
                         <div>{{item}}</div>
                         <div><div v-for="item in kechengs">{{item}}</div></div>
                 </div>
             </div>
            </div>
         </div>
        </div>


       <!--最新开班课程-->
      <div  class="huwebclass">
         <div>
          <div>
              最新开班课程
          </div>

           <div>
                <div v-for="item in lists" class="classdan">
                    <div class="huclasstop">
                        <div>{{item.title}}</div>
                        <div>
                            <div>
                                <div>{{item.kecheng}}</div>
                                <div>{{item.banji}}</div>
                                <div>{{item.number}}人</div>
                            </div>
                            <div>{{item.date}}开班</div>
                        </div>
                    </div>
                    <div  class="huclassbottom">
                        <div><img  :src="item.src" /></div>
                        <div>
                            <div>{{item.name}}</div>
                            <div>剩余名额{{item.shenyu}}人</div>
                        </div>
                        <div  @click="toxqhuclass">
                            查看详情
                        </div>
                    </div>
                </div>
           </div>
      </div>

    </div>
</div>



<div  class="dibussss"></div>
</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script  src="js/vue.js"></script>
<script  type="text/javascript">


    $(document).ready(function () {
        $(".head").load("head.html")
        $(".fudongd").load("fudong.html")
        $(".dibussss").load("dibu.html")
    })

    window.onload = function() {
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay:true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        });

        var mySwiper1 = new Swiper ('.swiper-container2', {
            direction: 'vertical', // 垂直切换选项
            slidesPerView : 2,   // 设置每个模块数量
            spaceBetween : 10, //设置间距
            autoplay:true,
            loop:true,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop: true, // 循环模式选项
        });
    }

    new Vue({
        el:"#hucontain",
        data:{
            indextea:0,
            indexs:5,  //导航栏下标
            state:true,  //判断是否登录
            haizis:["胡杰","胡杰1"],
            webmorentou:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",
            lunbos:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/webbanner.png"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webbanner.png"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webbanner.png"}],
            kcdhimg:"http://bzt.cybwnt.com/uploads/zhongxue/webredian.png",
            kcdhimg1:"http://bzt.cybwnt.com/uploads/zhongxue/webrehuodong.png",
            myxinxi:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/weba1.png",miao:"已报课程" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/weba4.png",miao:"课程表" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/weba5.png",miao:"作业表" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/weba6.png",miao:"我的试卷" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/weba2.png",miao:"老师评价" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/weba3.png",miao:"孩子信息" },
            ],
            sd:["一年级","二年级","三年级","四年级","五年级","六年级"],
            sd1:["初一","初二","初三",],
            sd2:["高一","高二","高三"],
             kechengs:["语文","数学","英语","政治","历史","化学","地理","音乐","其他"],
            lists:[
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
                {title:"2019暑四年级趣味语文入门精修班",kecheng:"语文",banji:"2班",number:"30",date:"06-12",src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张夏",shenyu:"10"},
            ]

        },
        methods: {
            //点击导航栏
            hoverd: function ($event) {
                this.indexs = $event.target.getAttribute("index")
            },
            //跳转进入我的页面
            tomy:function (index) {
                   var id=index
                window.open("humys.html?id="+id)
            },
            // 跳转进入详情页面
            toxqhuclass:function () {
                window.open("xqhuclass.html")
            }

        }

    })


</script>
</html>